<template>
	<scroll-view 
	tyle="height: 10vh;"
	scroll-y="true" 
	lower-threshold="100"
	@scrolltolower="lower"
	@scroll="scroll"
	>
		<!-- 评论列表 -->
		<div class="comment-wrap">
		  <!-- 输入框 -->
		  <div v-if="uid&&!replaceId" class="input_wrap">
		   <!-- <div class="user_img">
		      <image :src="userinfo.userimg" alt="" />
		    </div> -->
		    <div class="input_data">
		     <input v-model="commentData" type="text">
		    </div>
		    <div class="input_but" @click="sebmitInput">发送</div>
		  </div>
		  <div v-if="!isLogin" class="notlogin">
		    <div class="text">您还没有登录，无法发表评论</div>
		    <div class="but" @click="goToLogin">立即登录</div>
		  </div>
		  <!-- 评论区 -->
		  <div class="fool-list">
		    <div class="user-item" v-for="item,index in moment" :key="item.id">
		      <div class="user-image">
		        <image :src="item.avatar" mode="" />
		      </div>
		      <div class="user-main">
		        <div class="name">
		          {{ item.username }}
		          <div
		            v-if="uid && replaceId !== item.id && userinfo.id!=item.userId"
		            class="reply_one"
		            @click="handlereplace(item.id)"
		          >
		            回复
		          </div>
		        </div>
		        <div class="html-data">{{ item.data }}</div>
		        <div class="date-wrap">
		          <div class="date">{{ dateTimeFn(item.createTime)  }}</div>
		          <div class="option"></div>
		        </div>
		        <div class="comment" v-show="item.comment.length">
		          <div
		            class="pl-item"
		            v-for="(item1, index1) in item.comment"
		            :key="index1"
		          >
		            <div class="author">{{ item1.username }}</div>
		            <div class="author-data">
		              {{ item1.data }} &nbsp;&nbsp;
		              <!-- <span @click="handlereplace(item.id)" class="reply">回复</span> -->
		            </div>
		          </div>
		        </div>
		        <!-- 回复评论 -->
		        <div v-if="replaceId === item.id" class="replace_two" >
		         <!-- <div class="user_img">
		            <image :src="userinfo.userimg" alt="" />
		          </div> -->
		          <div class="input_data">
		            <input  v-model="commentData" class="search-input" focus placeholder="请输入" />
		          </div>
		          <div class="input_but" @click="sebmitInput(index)">发送</div>
		        </div>
		      </div>
		    </div>
		  </div>
		</div>
	</scroll-view>
</template>

<script>
// import myStore from "../utils/localStore";
import formatDate from "@/utils/formatDate"
import { getItem } from "@/utils/selfLocalStorage.js"

export default {
  name: "comment",
  props: ["uid","moment", "sendComment", "updateComment"],
  data() {
    return {
	  // scrollTop:0,
      isLogin: true, // 是否登录
      userinfo: {
		  id:null,
		  username:"",
		  avatar:"http://120.24.182.152:5555/s/static/s/image_files/users_image/wsc.png",
		  },
      commentData: "", // 评论数据
      backId:false, // 是否为楼层回复
      replaceId: null, // 回复楼层评论的id
    };
  },
  mounted() {
	 this.userinfo.id = getItem("uid");
	 this.userinfo.username = getItem("username");
	 
    // this.userinfo = myStore.getStore("userinfo") || {};
    // if (this.userinfo["id"]) {
    //   this.isLogin = true;
    // } else {
    //   this.isLogin = false;
    // }

    // this.getData()
  },
  methods: {
    // 获取评论数据
    getData() {
      this.updateComment();
    },
	
	// 日期格式化 
	dateTimeFn: function(value) {
		return formatDate.format2(value);
	},
	

    // 点击确定
    sebmitInput(subIdx) {
      if (this.commentData.length < 1) return;
	  
      this.sendComment(
			  this.commentData, 
			  this.replaceId,
			  subIdx
			);
      // 恢复
      this.replaceId = null
      this.commentData = "";
    },

    // 点击回复
    handlereplace(id) {
      this.replaceId = id;
    },

    // 去登录
    goToLogin() {
      // this.$router.push("/login");
    },
	
	// 触底
	lower(){
		console.log("触底了")
	},
	scroll(){
		console.log("滚动了")
	}
  },
};
</script>

<style lang='less' scoped>
/* // 视频评论 */
.comment-wrap {
  margin-top: 20rpx;
  /*  输入框 */
  
  .input_wrap {
	padding: 20rpx 40rpx;
    display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	
    .user_img {
      width: 10%;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
	  
	  image {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: #dadada;
	  }
    }

    .input_data {
      width: calc( 100% - 240rpx ) ;
	  height: 60rpx;
      padding: 0 10px ;
	  background-color: #f6f5f8;
	  border: 3rpx #5ca45b solid ;
	  border-radius: 36rpx;
    }

    .input_but {
      width: 150rpx;
      height: 60rpx;
      border-radius: 10px;
      background: #5ca45b;
      font-size: 14px;
      color: #fff;
      text-align: center;
      line-height: 30px;
    }
    .input_but:hover {
      cursor: pointer;
    }
  }
  /* //未登录 */
  .notlogin {
    display: flex;
    align-items: center;
    .text {
    }
    .but {
      margin-left: 20px;
      background: #5ca45b;
      color: #fff;
      height: 32px;
      width: 70px;
      border-radius: 10px;
      line-height: 32px;
      text-align: center;
    }
  }

  /* // 评论列表 */
  .fool-list {
    display: flex;
    flex-direction: column;
    background: #fff;
    margin-top: 15rpx;

    .user-item {
      padding: 10px 20px;
      display: flex;
	  
      .user-image {
        flex: 1;
        padding-right: 20rpx;
        image {
          float: right;
          width: 44px;
          height: 44px;
          border-radius: 50%;
          background: #dadada;
        }
      }

      .user-main {
        flex: 8;
        .name {
          position: relative;
          height: 44px;
          text-align: left;
          font-size: 15px;
          line-height: 44px;

          .reply_one {
            position: absolute;
            top: 0;
            right: 10px;
            height: 100%;
            width: 40px;
            font-size: 14px;
            font-weight: 700;
            color: #5ca45b;
          }
        }

        .html-data {
          width: 100%;
          margin-bottom: 20px;
        }

        .date-wrap {
          font-size: 10px;
          color: rgb(126, 126, 126);
        }

        .comment {
          padding: 10px;
          /* width: 100%; */
          background: #f6f5f8;

          .pl-item {
            display: flex;

            .author {
              width: 40px;
              padding-right: 5px;
              color: #5ca45b;
              line-height: 22px;
              white-space: nowrap;
            }

            .author-data {
              line-height: 22px;
              font-size: 12px;
            }
            .reply {
              display: line;
              color: #5ca45b;
            }
          }
        }

        /* // 回复楼层数据 */
        .replace_two {
		  padding: 10rpx 0;
          display: flex;
		  align-items: center;
		  
          .user_img {
            width: 10%;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            image {
              width: 44px;
              height: 44px;
              border-radius: 50%;
            }
          }

          .input_data {
            width: calc( 100% - 140rpx );
			height: 60rpx;
            padding: 0 10px;
			background-color: #f6f5f8;
			border: 3rpx #5ca45b solid ;
			border-radius: 36rpx;
          }

          .input_but {
            width: 100rpx;
            height: 60rpx;
            border-radius: 10px;
            background: #5ca45b;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 30px;
          }
          .input_but:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
}

/* // 修改ui组件 */
.el-textarea__inner{
  color: #333 !important;
}
</style>